<template>
  <div>
    <dialog-edit :visible.sync="dialogVisible" title="编辑" ref="userManageEdit" width="1200" @save="save" :remember="false" :destroyOnClose="true"
                 :height="500" :saveFlag="true" :loading="loading"
                 :escClosable="true" :closeFlag="true" :saveLoading="saveLoading">
      <vxe-form :data="formValue" :rules="formRules" ref="vxeForm"
                span="24" slot="body"
                title-width="100" title-align="right">
        <vxe-form-item title="颜色选择" field="Colour">
          <ul class="color-select">
            <li v-for="item in colors" :style="{ backgroundColor: item.colorS }"
                @click="clickColor(item)" :active="formValue.Colour === item.colorS"></li>
          </ul>
        </vxe-form-item>
        <vxe-form-item title="需求名称" field="Name">
          <vxe-input v-model="formValue.Name" clearable></vxe-input>
        </vxe-form-item>
        <vxe-form-item title="来源" field="Source">
          <DictionarySelect v-model="formValue.Source" size="small" dictTypeCode="NEEDS_SOURCE" clearable></DictionarySelect>
        </vxe-form-item>
        <vxe-form-item title="优先级" field="Level">
          <DictionarySelect v-model="formValue.Level" size="small" dictTypeCode="LEVEL" clearable></DictionarySelect>
        </vxe-form-item>
        <vxe-form-item title="阶段" field="Stage">
          <DictionarySelect v-model="formValue.Stage" size="small" dictTypeCode="NEEDS_STAGE"></DictionarySelect>
        </vxe-form-item>
        <vxe-form-item title="状态" field="Status">
          <DictionarySelect v-model="formValue.Status" size="small" dictTypeCode="NEEDS_STATUS"></DictionarySelect>
        </vxe-form-item>
        <vxe-form-item title="指派给" field="Acceptid">
          <SelectProjectTeam v-model="formValue.Acceptid" :url="userApi" getPage="getPage" responseData="Users" :queryValue="{}"
                             searchKeyword="keywords" column="Realname" clickValue="Userid"
                             showValue="Realname" :showValueShow="[]">
          </SelectProjectTeam>
        </vxe-form-item>
        <vxe-form-item title="预计工时" field="Tasktime">
          <vxe-input v-model="formValue.Tasktime" type="number" min="0" max="127" clearable></vxe-input>
        </vxe-form-item>
        <vxe-form-item title="描述" field="Desc">
          <wangeditor v-model="formValue.Desc"></wangeditor>
        </vxe-form-item>
        <vxe-form-item title="验收标准" field="Acceptance">
<!--          <wangeditor v-model="formValue.Acceptance"></wangeditor>-->
          <mark-down v-model="formValue.Acceptance" placeholder="验收标准"></mark-down>
        </vxe-form-item>
        <vxe-form-item title="附件" field="Attachment">
          <btnUpload v-model="formValue.Attachment" type="file" uploadApi="/v1/upload/"></btnUpload>
        </vxe-form-item>
<!--        <vxe-form-item class="isLine">-->
<!--          <el-col>-->
<!--            <vxe-button status="primary" size="small" v-throttle="[save, `click`, 300]">保存</vxe-button>-->
<!--            <vxe-button @click="close" size="small">关闭</vxe-button>-->
<!--          </el-col>-->
<!--        </vxe-form-item>-->
      </vxe-form>
    </dialog-edit>
  </div>
</template>

<script>
import dialogEdit from '@/components/element/dialogEdit'
import DictionarySelect from "@/components/element/select/DictionarySelect";
import SelectProjectTeam from "@/components/element/select/SelectProjectTeam";
import btnUpload from "@/components/element/btnUpload";
import projectNeedApi from "@/api/organizationApi/projectNeedApi";
import wangeditor from '@/components/element/wangeditor/index';
import userApi from '@/api/userApi'
import markDown from "@/components/element/markdown/markDown";

export default {
  inject: {
    initData: {
      default: null
    }
  },
  name: "dragDialog",
  components: {
    dialogEdit,
    DictionarySelect,
    SelectProjectTeam,
    btnUpload,
    wangeditor,
    markDown
  },
  props: {
    visible: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    form: {
      type: Object,
      default: () => {
        return {}
      }
    },
    title: {
      type: String,
      default: () => {
        return '编辑'
      }
    }
  },
  computed: {
    dialogVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    formValue: {
      get () {
        return this.form
      },
      set (val) {
        this.$emit('update:form', val)
      }
    }
  },
  data () {
    return {
      colors: [
        {
          colorS: '#ff0000'
        },
        {
          colorS: '#ffff00'
        },
        {
          colorS: '#008000'
        },
        {
          colorS: '#0000FF'
        }
      ],
      Projectid: this.$route.params.id,
      userApi: userApi,
      loading: false,
      saveLoading: false,
      formRules: {
        Name: [
          { required: true, message: '请输入需求名称' }
        ],
        Source: [
          { required: true, message: '请选择来源' }
        ],
        Level: [
          { required: true, message: '请选择优先级' }
        ],
        Stage: [
          { required: true, message: '请选择阶段' }
        ]
      }
    }
  },
  methods: {
    clickColor (it) {
      this.$set(this.formValue, 'Colour', it.colorS)
      console.log(this.formValue.Colour)
    },
    converRgbToArgb (r, g, b) {
      let color = ((0xFF << 24)|(r << 16)|(g << 8)|b);
      return color;
    },
    close (type) {
      this.dialogVisible = false
      if (type === 'C') {
      }
      this.initData.getNeedList()
    },
    // 保存
    save () {
      this.$refs.vxeForm.validate().then(() => {
        if (this.formValue.Id) {
          this.updaten()
        } else {
          this.saven()
        }
      }).catch(r => {
        this.warning('查看标红位置是否正确')
      })
    },
    updaten () {
      let a = JSON.parse(JSON.stringify(this.formValue))
      a = Object.assign(a, {
        Projectid: this.Projectid
      })
      projectNeedApi.update(a).then(res => {
        if (res && res.code) {
          this.close()
        }
        if (res.code) {
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 保存
    saven () {
      let a = JSON.parse(JSON.stringify(this.formValue))
      a = Object.assign(a, {
        Projectid: this.Projectid
      })
      projectNeedApi.create(a).then(res => {
        if (res && res.code) {
          this.close('C')
        }
        if (res.code) {
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    initDataFun () {
      if (this.formValue.hasOwnProperty('Source')) {
        this.formValue.Source = this.formValue.Source.toString()
      }
      if (this.formValue.hasOwnProperty('Stage')) {
        this.formValue.Stage = this.formValue.Stage.toString()
      }
      if (this.formValue.hasOwnProperty('Status')) {
        this.formValue.Status = this.formValue.Status.toString()
      }
      if (this.formValue.hasOwnProperty('Level')) {
        this.formValue.Level = this.formValue.Level.toString()
      }
      if (this.formValue.hasOwnProperty('Colour')) {
        if (this.formValue.Colour.toString().length === 0) {
          this.formValue.Colour = '#ff0000'
        }
      }
    }
  },
  watch: {
    dialogVisible: {
      immediate: true,
      handler (n, o) {
        if (n) {
          this.initDataFun()
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.color-select {
  display: flex;
  flex-direction: row;
  li[active="true"] {
    box-shadow: 0 0 10px #00d1b2;
  }
  li {
    list-style: none;
    width: 60px;
    height: 20px;
    border-radius: 10px;
  }
  li+li {
    margin-left: 10px;
  }
}
</style>